import React, { useState, useRef, useEffect } from "react";
import { Carousel, Segmented, Dropdown, Tag } from "antd";
import "./index.less";

// SegmentedList 组件接口
interface SegmentedListProps {
  tabList: Array<string>;
  activeColor: string;
  inactiveColor: string;
  onChange: (value: string) => void; // 添加 onChange 回调
}

// 自定义切换tabs
export const SegmentedList: React.FC<SegmentedListProps> = ({ tabList, activeColor, inactiveColor, onChange }) => {
  return (
    <div className="task-list">
      <Segmented
        options={tabList}
        style={
          {
            "--active-color": activeColor,
            "--inactive-color": inactiveColor
          } as React.CSSProperties
        }
        onChange={onChange}
      />
    </div>
  );
};

// Kcarousel 组件接口
interface KcarouselProps {
  listData: Array<any>;
  children: (item: any) => React.ReactNode;
}

// 分页样式处理
export const Kcarousel: React.FC<KcarouselProps> = ({ listData, children }) => {
  return (
    <Carousel style={{ height: "100%" }}>
      {listData.map((page, index) => (
        <div key={index}>
          {page.map((item: any, subIndex: number) => (
            <div key={subIndex}>
              {children(item)} {/* 调用 children 函数并传递 item */}
            </div>
          ))}
        </div>
      ))}
    </Carousel>
  );
};

// 六边形背景图（自定义）
interface HexagonProps {
  backgroundColor?: string; // 可选的背景颜色
  imageUrl: string; // 图片的URL
}
export const Hexagon: React.FC<HexagonProps> = ({ backgroundColor = "#ffffff", imageUrl }) => {
  return (
    <div className="hexagon" style={{ backgroundColor }}>
      <img src={imageUrl} alt="Hexagon Image" className="hexagon-img" />
    </div>
  );
};

// 右键弹出菜单（定位动画效果后续完善）

interface RightClickMenuProps {
  menuItems: any[];
  children: React.ReactNode;
}

export const RightClickMenu: React.FC<RightClickMenuProps> = ({ menuItems, children }) => {
  const [visible, setVisible] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  const handleRightClick = (e: React.MouseEvent) => {
    e.preventDefault();
    setVisible(true);
  };

  const handleClickOutside = (event: MouseEvent) => {
    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
      setVisible(false);
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, []);

  return (
    <Dropdown
      overlay={<CustomMenu onClose={() => setVisible(false)} menuItems={menuItems} />}
      trigger={["contextMenu"]}
      onVisibleChange={setVisible}
      overlayClassName="custom-dropdown" //动画效果
      visible={visible}
    >
      <div onContextMenu={handleRightClick}>{children}</div>
    </Dropdown>
  );
};

interface CustomMenuProps {
  menuItems: any[];
  onClose: () => void; // 回调函数，用于关闭菜单
}
const CustomMenu: React.FC<CustomMenuProps> = ({ menuItems, onClose }) => {
  function close(item: any) {
    item.action();
    onClose();
  }
  return (
    <div className="custom-menu">
      <div className="custom-menu-header">布局</div>
      <div className="custom-menu-content">
        {menuItems.map((item, index) => (
          <Tag
            className="custom-menu-content-tag"
            key={index}
            onClick={() => {
              close(item);
            }}
            style={{ backgroundColor: item.isDefalut ? "rgba(94,95,96,0.5)" : "rgba(255,255,254,1)" }}
          >
            {item.label}
          </Tag>
        ))}
      </div>
    </div>
  );
};
